<template>
<span class="dots">
    <span class="dot" v-for="(item,idx) in flag" :key="idx">.</span>
</span>
</template>

<script>
export default {
    computed:{
    },
    data() {
        return {
            num:6,
            listNum:[],
            flag: 0,
            timer: null,
            interval: 200,
        }
    },
    mounted() {
        for(let i=0;i<this.num;i++){
            this.listNum.push(i)
        }
        this.init()
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
    methods: {
        init() {
            this.timer = setInterval(() => {
                if (this.flag < this.num) {
                    this.flag++
                } else {
                    this.flag = 0
                }
            }, this.interval)
        },
    }
}
</script>

<style lang="scss" scoped>
.dots {}
</style>
